<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<!--导入Google Maps API库文件。注意将本代码中的API Key替换为前文申请到的API Key-->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA1j86tnUDFv8OAtC8dZVtKRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSzmwrQ90SNUILzGRpsBiaa860gfQ"
      type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    //声明GMap对象
    var map;
    var eventinfo;
    var mapcenter;
    var zoomlevel;
    var maptype;
    
    //更新信息，el为指定HTML元素，info为里边显示的内容
    function updateInfo(el, info)
    {
      el.innerHTML = info;
    }
    
    //添加拖动事件监听器
    function addDragListener()
    {
       //监听地图上的事件
       GEvent.addDomListener(map, 'dragstart', function()
                    {
                        updateInfo(eventinfo, "当前事件：dragstart");
                    });
       GEvent.addDomListener(map, 'drag', function()
                    {
                        updateInfo(eventinfo, "当前事件：drag");
                        updateInfo(mapcenter, "当前地图中心纬度：" + map.getCenter().lat() + " 经度" + map.getCenter().lng());
                    });
       GEvent.addDomListener(map, 'dragend', function()
                    {
                        updateInfo(eventinfo, "当前事件：dragend");
                    });
    }
    
    //添加缩放事件监听器
    function addZoomListener()
    {
       //监听地图上的缩放事件
       GEvent.addDomListener(map, 'zoomstart', function()
                    {
                        updateInfo(eventinfo, "当前事件：zoomstart");
                    });
       GEvent.addDomListener(map, 'zoomend', function()
                    {
                        updateInfo(eventinfo, "当前事件：zoomend");
                        updateInfo(zoomlevel, "当前地图缩放级别：" + map.getZoom());
                    });
    }
    
    //添加maptypechanged事件监听器
    function addMapTypeListener()
    {
       //监听地图上maptypechanged事件
       GEvent.addDomListener(map, 'maptypechanged', function()
                    {
                        updateInfo(eventinfo, "当前事件：maptypechanged");
                        updateInfo(maptype, "当前地图类型：" + map.getCurrentMapType().getName(false));
                    });
    }

    function load()
    {
      if (GBrowserIsCompatible())
      {
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(39.92, 116.46), 4);
        
        map.addControl( new GMapTypeControl() );
        map.addControl( new GLargeMapControl() );
        
        eventinfo = document.getElementById("eventinfo");
        mapcenter = document.getElementById("mapcenter");
        zoomlevel = document.getElementById("zoomlevel");
        maptype = document.getElementById("maptype");
        
        addDragListener();
        addZoomListener();
        addMapTypeListener();
        
      }
    }
    
    
//]]>
    </script>
  </head>
  <!--加载时调用load()函数加载地图，注意加上onunload="GUnload()"防止内存泄露-->
  <body onload="load()" onunload="GUnload()">
    <!--以下id为map的DIV元素即为Google地图的容器-->
    <div id="map" style="width: 500px; height: 400px;"></div>
    <div id="eventinfo"></div>
    <div id="mapcenter"></div>
    <div id="zoomlevel"></div>
    <div id="maptype"></div>
    <!--p>
    <input type="button" value="添加polyline" onclick="addPolyline()" />
    <input type="button" value="移除polyline" onclick="removePolyline()" />
    </p-->
  </body>
</html>
